<template>
  <el-row>
    <el-col :span="6">
      <h3>SSH 密钥</h3>
      <span style="font-size: small">SSH 密钥用于在您的电脑和 GitLab 建立安全连接。</span>
    </el-col>
    <el-col :span="12">
      <h5>增加 SSH 密钥</h5>
      <span style="font-size: small">
        要添加一个 SSH 密钥, 您需要 <el-tooltip
          class="item"
          effect="dark"
          content="ssh-keygen -t xxxx -C 'email@example.com'"
          placement="top-start"
        ><span class="ssh-tip">生成一个</span></el-tooltip> 或使用一个 现有的 key。</span>
      <h5>Key</h5>
      <span style="font-size: small">粘贴您的 SSH 公钥，通常包含在 <span class="ssh-tip">~/.ssh/id_rsa.pub</span> 文件中，并以 <span
        class="ssh-tip"
      >ssh-rsa</span> 开头。不要使用您的 SSH 私钥。</span>
      <el-form ref="form" :rules="rules" style="margin-top:20px;" label-position="top" :model="form">
        <el-form-item prop="key" label="SSH Key">
          <el-input v-model="form.key" type="textarea" :rows="4" />
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title" placeholder="通过标题命名您的个人密钥 例如: My MacBook Key" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addSSHKey">添加密钥</el-button>
        </el-form-item>
      </el-form>
      <el-divider />
      <h4>您的 SSH 密钥
        <el-badge class="mark" :value="sshNum" />
      </h4>
      <el-table
        v-loading="loading"
        :data="sshList"
        :show-header="false"
        style="width: 100%"
      >
        <el-table-column prop="id" />
        <el-table-column prop="title" />
        <el-table-column prop="key">
          <template slot-scope="{row}">
            <span class="ssh-key">{{ row.key }}</span>
          </template>
        </el-table-column>
        <el-table-column>
          <template slot-scope="{row}">
            {{ row.created_at | filterDuration }}
          </template>
        </el-table-column>
        <el-table-column align="center">
          <template slot-scope="{row, $index}">
            <span class="ssh-action"><i
              v-clipboard:copy="row.key"
              v-clipboard:success="onCopy"
              v-clipboard:error="onError"
              title="点击复制"
              style="color: lightseagreen; font-size: medium"
              class="el-icon-document-copy"
            /></span>
            <span class="ssh-action"><i
              style="color: red; font-size: medium"
              class="el-icon-delete"
              @click="deleteSShKey(row.id, $index)"
            /></span>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
</template>

<script>
import { getData, postData } from '@/api/requestData'
import { handleTimeDuration } from '@/utils/index'
export default {
  filters: {
    filterDuration(time) {
      return handleTimeDuration(time)
    }
  },
  data() {
    return {
      pid: '',
      pname: '',
      form: {
        title: '',
        key: ''
      },
      rules: {
        title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
        key: [{ required: true, message: 'ssh key不能为空', trigger: 'blur' }]
      },
      sshList: [],
      sshNum: 0,
      loading: true
    }
  },
  created() {
    this.pid = this.$route.params.pid
    this.pname = this.$route.params.pname
  },
  mounted() {
    this.SSHKeysList()
  },
  methods: {
    addSSHKey() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const params = this.form
          postData('/git/public/add/sshkey/', params).then((response) => {
            this.$refs['form'].resetFields()
            this.sshList.push(response.data)
            this.$message.success(response.message)
          }).catch(() => {})
        }
      })
    },
    SSHKeysList() {
      this.loading = true
      getData('/git/public/sshkeys').then((response) => {
        this.sshList = response.data
        this.sshNum = response.data.length
        this.loading = false
      })
    },
    deleteSShKey(id, index) {
      this.$confirm('确认删除', '提示', {
        confirmButtonType: 'warning',
        cancelButtonType: 'text',
        type: 'error'
      }).then(() => {
        getData('/git/public/delete/sshkey/' + id).then((response) => {
          this.sshList.splice(index, 1)
          this.$message.success(response.message)
        })
      }).catch(() => {
        this.$message.info('取消删除')
      })
    },
    onCopy(e) {
      // 复制成功
      this.$message.success('复制成功')
    },
    onError(e) {
      // 复制失败
      this.$message('复制失败')
    }
  }
}
</script>

<style scoped>
.ssh-tip {
  color: #66b1ff;
}

.ssh-tip:hover {
  cursor: pointer;
}

.ssh-action:hover {
  cursor: pointer;
}

.ssh-action {
  display: inline-block;
  margin-right: 10px;
}

.ssh-key {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>